<template>
  <div class="addForm">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="addForm"
      label-width="150px"
      class="site-form"
    >
      <el-form-item label="请选择渠道" prop="channel_id">
        <!-- <el-select v-model="ruleForm.channel_id" placeholder="请选择渠道" @change="changeChannel">
          <el-option
      v-for="item in mediaList"
      :key="item.id"
      :label="item.title"
      :value="item.id">
    </el-option>
        </el-select> -->
        <el-cascader
              v-model="ruleForm.channel_id"
              :options="mediaList1"
              :props="{ expandTrigger: 'hover' , label:'title',value:'id' }"
              @change="changeChannel"
              clearable
          >
        </el-cascader>
      </el-form-item>
      <el-form-item label="使用模版" prop="page_id">
        <el-select v-model="ruleForm.page_id" placeholder="请选择使用模版">
          <el-option
      v-for="item in MdList"
      :key="item.id"
      :label="item.id+item.name"
      :value="item.id">
    </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="复用老站点回传方案" prop="callback_media_id">
        <el-select v-model="ruleForm.callback_media_id" placeholder="请选择">
          <el-option
      v-for="item in operaList"
      :key="item.product_id"
      :label="item.product_name"
      :value="item.product_id">
    </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="加微回传方案" prop="callback_wechat">
        <el-select v-model="ruleForm.callback_wechat" placeholder="请选择加微回传方案">
          <el-option
      v-for="item in callback_wechat_options"
      :key="item.id"
      :label="item.title"
      :value="item.id">
    </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="自定义-strid" prop="strid">
        <el-input v-model="ruleForm.strid" :disabled=disabledList[0]></el-input>
      </el-form-item>
      <el-form-item label="自定义-cctid" prop="cctid">
        <el-input v-model="ruleForm.cctid" :disabled=disabledList[1]></el-input>
      </el-form-item>
      <el-form-item label="自定义-bepid" prop="bepid">
        <el-input v-model="ruleForm.bepid" :disabled=disabledList[2]></el-input>
      </el-form-item>
      <el-form-item label="接量方案" prop="project_id">
        <el-select v-model="ruleForm.project_id" placeholder="请选择接量方案">
          <el-option
      v-for="item in projList"
      :key="item.id"
      :label="item.name"
      :value="item.id">
    </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="站点名称" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <div class="footer">
        <el-button @click="reset">取消</el-button>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </div>
    </el-form>
  </div>
</template>
<script>
import { getOptionList,getMediaList,getOperaList,getOptionListCs } from "@/api/order";
import { getOptionListMd,addSite,updateSite,checkNameExists,getProject } from '@/api/site.js'
export default {
  props:{
    upDatedItem:{}
  },
  data() {
    return {
      callback_wechat_options:[],
      operaList:[],
      MdList:[], 
      projList:[],
      mediaList:[],
      mediaList1:[],
      disabledList:[
        false,
        false,
        false
      ],
      ruleForm: {
        name: "",
        page_id: "",
        channel_id: [],
        callback_media_id: "",
        callback_wechat: "",
        strid: "",
        cctid: "",
        bepid: "",
        project_id:''
      },
      rules: {
        page_id: [
            { required: true, message: '请选择模版', trigger: 'change' }
          ],
          channel_id: [
            { required: true, message: '请选择渠道', trigger: 'change' }
          ],
          callback_wechat: [
            { required: true, message: '请选择加微回传方案', trigger: 'change' }
          ],
          callback_media_id: [
            { required: true, message: '请选择站点', trigger: 'change' }
          ],
          project_id: [
            { required: true, message: '请选择接量方案', trigger: 'change' }
          ],
        name: [
          { required: true, message: "请输入名称", trigger: "blur" },
          {
            min: 1,
            max: 30,
            message: "长度在 1 到 30 个字符",
            trigger: "blur",
          },
        ],
        strid: [
          { required: true, message: "请输入strid", trigger: "blur" },
        ],
        cctid: [
          { required: true, message: "请输入strid", trigger: "blur" },
        ],
        bepid: [
          { required: true, message: "请输入bepid", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
  async getMediaList1(){
   return new Promise((resolve, reject) => {
      getOptionListCs().then(res=>{
      this.mediaList1=res.data
      resolve()
     })
    });
  
    },
    changeChannel(e){
      let item = this.mediaList1.find(el=>el.id==e[0])
      let innerItem =item.children.find(el=>el.id==e[1])
      this.ruleForm.strid=innerItem.strid
      this.ruleForm.cctid=innerItem.cctid
      this.ruleForm.bepid=innerItem.bepid
    },
    submitForm() {
        this.$refs.addForm.validate((valid) => {
          if (valid) {
            if(this.ruleForm.id){
              let obj={
                id:this.ruleForm.id,
                name:this.ruleForm.name,
                channel_id:this.ruleForm.channel_id[1],
                callback_media_id:this.ruleForm.callback_media_id,
                callback_wechat:this.ruleForm.callback_wechat,
                strid:this.ruleForm.strid,
                cctid:this.ruleForm.cctid,
                bepid:this.ruleForm.bepid,
                page_id:this.ruleForm.page_id,
                project_id:this.ruleForm.project_id
              }
              updateSite(obj).then(res=>{
                this.$message({
                message: '修改成功',
                type: 'success'
               });
                this.$emit('pass',true)
              })
            }
            else{
              checkNameExists({name:this.ruleForm.name}).then(res=>{
                if(res.data.length!=0){
                  this.$message.error('站点名称不能重复,请重新填写');
                }
                else{
                  this.ruleForm.channel_id=this.ruleForm.channel_id[1]
                     addSite(this.ruleForm).then(res=>{
                      this.$message({
                     message: '添加成功',
                    type: 'success'
                     });
                     this.$emit('pass',true) 
              })
                }
              })
           
            }
            
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      reset(){
        this.$emit('pass',false)
        this.$refs.addForm.clearValidate()  
      }
  },
watch: {
  upDatedItem:{
   async handler(newV){
    if(this.mediaList1.length<=0){
      await this.getMediaList1()
    }
      if(newV){
      this.ruleForm=newV
      this.ruleForm.channel_id=[null,newV.channel_id]
        this.mediaList1.forEach(ele => {
          ele.children.forEach(el=>{
            if(el.id==this.ruleForm.channel_id[1]){
              this.ruleForm.channel_id.splice(0,1,ele.id)
            }
          })
        });
      // this.disabledList=[true,true,true]
      this.$nextTick(()=>{
        this.$refs.addForm.validate()  
      })
    }
    else{
      // this.disabledList=[false,false,false]
        this.ruleForm={
        name: "",
        page_id: "",
        channel_id: [],
        callback_media_id: "",
        callback_wechat: "",
        strid: "",
        cctid: "",
        bepid: "",
        project_id:''
      }
      console.log(this.ruleForm)
      this.$nextTick(()=>{
        this.$refs.addForm.clearValidate()  
      })
    }
  },
  immediate:true
  }
},
 created() {
    getMediaList().then(res=>{
        this.callback_wechat_options=res.data
     })
     getOperaList().then(res=>{
        this.operaList=res.data
     })
     getOptionListMd().then(res=>{
      this.MdList=res.data
     })
    //  getOptionList({
    //     type:1
    //   }).then(res=>{
    //   this.mediaList=res.data
    //  })
     getProject().then(res=>{
      this.projList=res.data
     })
},
};
</script>
<style lang="scss" scoped>
.addForm {
  .site-form {
    width: 80%;
    margin: 0 auto;

    ::v-deep .el-select {
      width: 100%;
    }
    ::v-deep .el-cascader{
      width: 100%;
    }
    .footer {
      text-align: center;
    }
  }
}
</style>
